<template>
  <div class="container">
    <div class="search-org">
      <div class="search-left"><input class="search-input"
               placeholder="点击搜索机构"
               @click="searchOrg"><i class="fa fa-search"></i></div>
      <div class="search-right"
           v-res="menu_0010_0002"><button class="button-add-org"
                @click="addOrg"><i class="fa fa-plus"></i>新增机构</button></div>
    </div>
    <div class="org-list">
      <ul>
        <li v-for="(org,index) in orgList"
            :key="index">
          <OrgLi v-bind:org="org"
                 v-on:optOrgListener='optOrgReturn'></OrgLi>
        </li>
      </ul>
    </div>
    <mugen-scroll :handler="getOrgList">
    </mugen-scroll>
  </div>
</template>

<script>
import OrgLi from "./orgListDetail.vue";
import MugenScroll from "vue-mugen-scroll";
export default {
  name: "org-index",
  components: {
    OrgLi,
    MugenScroll
  },
  mounted() {
    var _self = this;
    _self.getOrgList();
  },
  data() {
    return {
      params: {
        pageNo: 0,
        pageSize: 10
      },
      orgList: [],
      loading: false
    };
  },
  methods: {
    addOrg() {
      this.$router.push({ path: "/org/orgEdit" });
    },
    searchOrg() {
      this.$router.push("/org/search");
    },
    optOrgReturn() {
      this.orgList = [];
      this.params = {
        pageNo: 0,
        pageSize: 10
      };
      this.getOrgList();
    },
    getOrgList() {
      var _self = this;
      var index = layer.load();
      var body = {};
      body.params = _self.params;
      _self.params.pageNo = _self.params.pageNo + 1;
      var url = this.utilHelper.apiUrl + "/api/getOrgAssistantList";
      this.$http.post(url, body).then(response => {
        layer.close(index);
        var body = response.body;
        var resData = body.resData;
        if (1 == resData.result && resData.page.rows) {
          for (var i = 0; i < resData.page.rows.length; i++) {
            _self.orgList.push(resData.page.rows[i]);
          }
        }
        if (_self.params.pageNo == resData.page.total % _self.params.pageSize) {
          _self.loading = true;
        } else {
          _self.loading = false;
        }
      });
    }
  }
};
</script>

<style scoped>
.search-org {
  height: 35px;
  line-height: 35px;
  background: #ffffff;
}
.search-left {
  float: left;
  width: 70%;
  padding-left: 20px;
  position: relative;
}
.search-left i {
  position: absolute;
  left: 30px;
  top: 30%;
}
.search-input {
  position: relative;
  padding-left: 30px;
  width: 100%;
  border-right: 1px solid #bbbbbb;
}
.search-right {
  width: 30%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 35px;
}
.org-list {
  margin-top: 15px;
}
.org-list :after {
  clear: both;
}
.button-add-org {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 4px;
  border: 0;
  box-sizing: border-box;
  color: inherit;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  outline: 0;
  overflow: hidden;
  position: relative;
  text-align: center;
  background-color: #fff;
  color: #ff962e;
  padding: 0 10px;
  border: 1px solid #ff962e;
}
.button-add-org i {
  margin-right: 5px;
}
</style>